<template>
  <view class="contaienr">
    <view class="detail">
      <view class="subTitle">
        <div class="subTitle_left"></div>
        <div class="subTitle_right">基本信息</div>
      </view>
      <view class="cont">
        <view class="cont_box">
          <view>告警类型</view>
          <view>{{ info.type }}</view>
        </view>
        <view class="cont_box">
          <view>发生时间</view>
          <view>{{ info.happenTime || '' }}</view>
        </view>
        <view class="cont_box">
          <view>处理状态</view>
          <view>{{ info.disposeState == '0' ? '已处理' : '未处理' }}</view>
        </view>
        <view class="cont_box">
          <view>告警说明</view>
          <view>{{ info.alertDescription || '' }}</view>
        </view>
      </view>
      <view class="subTitle">
        <div class="subTitle_left"></div>
        <div class="subTitle_right">告警图片</div>
      </view>
      <view class="img">
        <image @click="preview(info.url)" :src="info.url" mode="aspectFit" />
      </view>
    </view>

    <view class="detail_btn">
      <view @click="showPop">添加待办</view>
    </view>

    <uni-popup ref="popup" background-color="#fff" :mask-click="false" :is-mask-click="false">
			<view class="popup-content">
				<view class="popup_title">
          <view>添加待办</view>
        </view>
        <view class="popup_cont">
          <view class="popup_cont_list">
            <view>待办主题</view>
            <view>{{ info.type }}</view>
          </view>
          <view class="popup_cont_list">
            <view>待办正文</view>
            <view>{{ info.alertDescription || '' }}</view>
          </view>
          <view class="popup_cont_list">
            <view>处理时限</view>
            <!-- <view> -->
              <uni-datetime-picker type="date" :clear-icon="false" v-model="single" />
            <!-- </view> -->
          </view>
          <view class="popup_cont_list">
            <view>负责人</view>
            <picker :range="range" @change="bindchange" mode="selector" >
              <view class="uni-input">{{ person || '请选择负责人' }}</view>
            </picker>
          </view>
        </view>
        <view class="popup_btn">
          <view @click="cancel">取消</view>
          <view @click="insert">上报</view>
        </view>
			</view>
		</uni-popup>
  </view>
</template>

<script>
  import dayjs from "../../utlis/dayjs.min";

  export default {
    data() {
      return {
        info: {},
        typelist: [
          { label: '0', value: '巡查告警' },
          { label: '1', value: '水情告警' },
          { label: '2', value: '雨情告警' },
          { label: '3', value: '工情告警' },
          { label: '4', value: '水资源告警' },
        ],
        single: '',
        person: '',
        range: [],
      }
    },
    onLoad(options) {
      if(options) {
        this.getDetail(options.warningId)
        this.getPersonlist()
      }
    },
    methods: {
      // 获取单条告警信息
      getDetail(id) {
        this.$request.getalarmInfo({ warningId: id }).then(res => {
          let info = res.data || {}
          info.type = this.typelist.find(item => item.label == info.alertType).value
          this.info = info
        })
      },
      preview(url) {
        uni.previewImage({
          urls: [url], // 需要预览的图片链接列表
        });
      },
      // 弹窗
      showPop() {
        this.$refs.popup.open()
      },
      // 三个责任人
      getPersonlist() {
        this.range = []
        this.$request.getperson().then(res => {
          let list = res.rows || []
          list.forEach(v => {
            this.range.push(v.name)
          })
        })
      },
      // 责任人
      bindchange(e) {
        this.person = this.range[e.target.value]
      },
      // 添加待办
      insert() {
        if(!this.single) {
          uni.showToast({
            title: '请选择处理时限',
            icon: 'none',
            duration: 2000
          })
          return
        }
        if(!this.person) {
          uni.showToast({
            title: '请选择负责人',
            icon: 'none',
            duration: 2000
          })
          return
        }
        let temp = {
          title: this.info.type,
          description: this.info.alertDescription,
          startTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.single,
          principal: this.person,
          warningId: this.info.uuid,
        }
        this.$request.addinsert(temp).then(res => {
          if(res.code == 200) {
            uni.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 2000
            });
            setTimeout(() => {
              this.$refs.popup.close()
              uni.navigateBack({ delta: 1 })
            }, 2000);
          }
        })
      },
      // 取消
      cancel() {
        this.single = ''
        this.person = ''
        this.$refs.popup.close()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .detail {
    padding: 25rpx;

    .cont {
      padding: 25rpx 0;

      .cont_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        line-height: 28rpx;
        padding: 20rpx 0;
        border-bottom: 2rpx solid #e9e7e7;

        &:nth-child(1) {
          border-top: 2rpx solid #e9e7e7;
        }
      }
    }

    .img {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 25rpx 0;

      image {
        max-width: 100%;
        // height: auto;
      }
    }
  }

  .subTitle {
    display: flex;
    align-items: center;

    .subTitle_left {
      width: 8rpx;
      height: 28rpx;
      background: #0D91FF;
    }

    .subTitle_right {
      font-size: 32rpx;
      font-weight: bold;
      color: #0D91FF;
      margin-left: 13rpx;
    }
  }

  .detail_btn {
    padding: 50rpx 25rpx 0;

    view {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
      border-radius: 40rpx;
      background-color: #00a0e9;
      cursor: pointer;
    }
  }

  ::v-deep .uni-popup__wrapper {
    border-radius: 15rpx;
  }

  .popup-content {
    border-radius: 20rpx;
    background-color: #fff;
    width: 70vw;

    .popup_title {
      background-color: #00a0e9;
      text-align: center;
      padding: 10px 0;
      color: #fff;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx;

      view {
        font-size: 28rpx;
        line-height: 28rpx;
        font-weight: bold;
      }
    }

    .popup_cont {
      // padding: 20rpx 30rpx 25rpx;
      padding: 0 30rpx;

      .popup_cont_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24rpx;
        line-height: 24rpx;
        padding: 25rpx 0 0;
        height: 40rpx;

        &:last-child {
          padding-bottom: 35rpx;
        }

        .uni-date {
          width: 240rpx;
          flex: none;

          ::v-deep {
            .uni-date-x--border {
              border: 0;
            }
            .uni-icons {
              display: none;
            }
            .uni-date__x-input {
              height: 1.4em;
              line-height: 1.4em;
              font-size: 26rpx;
              text-align: right;
            }
          }
        }
      }
    }

    .popup_btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-top: 1px solid #e9e7e7;

      view {
        font-size: 28rpx;
        line-height: 28rpx;
        color: #00a0e9;
        width: 50%;
        text-align: center;
        padding: 20rpx 0;

        &:nth-child(1) {
          color: red;
          border-right: 1px solid #e9e7e7;
        }
      }
    }
  }
</style>
